<template>
	<view class="container">
		<!-- 账单 -->
		<view class="order-money" style="margin-top: 20rpx;">
			<view class="order-money-top">
				<view class="order-money-top-item flex">
					<view class="">总租金</view>
					<view class="">￥ {{ orderInfo.rent_total }}</view>
				</view>
				<view class="order-money-top-item flex">
					<view class="text-color">首期租金</view>
					<view class="text-color">￥ {{ orderInfo.first_rent }}（第1期）</view>
				</view>
				<view class="order-money-top-item flex">
					<view class="text-color">已还租金</view>
					<view class="text-color">￥ {{ orderInfo.paid_total_rent }}（共{{ orderInfo.month_paid }}期）</view>
				</view>
				<view class="order-money-top-item flex">
					<view class="text-color">剩余租期</view>
					<view class="text-color">￥ {{ orderInfo.last_rent }}（共{{ orderInfo.last_term }}期）</view>
				</view>
			</view>
			<view class="order-money-bottom" @click="toBillDetail">
				<view class="flex" style="margin-top: 20rpx;">
					<view class="">账单详情</view>
					<view class="">></view>
				</view>
			</view>
		</view>
		
		<!-- 押金 -->
		<view class="deposit" v-if="false">
			<view class="deposit-top" style="margin-bottom: 20rpx;">押金</view>
			<view class="deposit-bottom">
				<view class="flex">
					<view class="text-color">商品押金</view>
					<view class="text-color">￥4.80</view>
				</view>
				<view class="flex">
					<view class="text-color">芝麻信用免押金额</view>
					<view class="text-color">￥3.79</view>
				</view>
			</view>
		</view>
		
		<!-- 配送方式 -->
		<view class="send">
			<view class="flex send-item">
				<view class="">到期买断金额</view>
				<view class="text-color">￥{{ orderInfo.setmeal_price }}</view>
			</view>
			<view class="divider"></view>
			<view class="flex send-item">
				<view class="">配送方式</view>
				<view class="text-color">{{ orderInfo.convey_type }}</view>
			</view>
		</view>
		
		<!-- 备注 -->
		<view class="remarks">
			<view class="">备注</view>
			<view class="remarks-detail" style="width: 80%; text-align: start;">{{ orderInfo.remark }}</view>
		</view>
		
		<!-- 订单相关 -->
		<view class="order-info" style="line-height: 2rem;">
			<view class="flex">
				<view class="">租赁协议</view>
				<view class="" @click="toAgreement">
					<text style="color: #2cb1ee;">查看协议</text><text> > </text>
				</view>
			</view>
			<view class="flex">
				<view class="">订单编号</view>
				<view class="">
					<text class="text-color" style="margin-right: 20rpx;">{{ orderInfo.trade_no }}</text>
					<image src="@/static/images/copy.png" mode="" style="width: 25rpx; height: 25rpx;" @click="copy(orderInfo.trade_no)"></image>
				</view>
			</view>
			<view class="flex">
				<view class="">创建时间</view>
				<view class="text-color">{{ orderInfo.create_time }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '账单详情',
				orderInfo: {},
				id: null
			}
		},
		onLoad(options) {
			console.log(options);
			this.orderInfo = JSON.parse(options.orderInfo)
			this.id = options.order_id
		},
		methods: {
			toAgreement() {
				uni.navigateTo({
					url: '/pagesA/my/agreement/agreement'
				})
			},
			toBillDetail() {
				uni.navigateTo({
					url: `/pagesA/my/order/myorder/payRent?order_id=${ this.id }&title=${ this.title }`
				})
			},
			copy(value) {
				uni.setClipboardData({
					data: value,
					success:() => {
						uni.$showMsg('复制成功')
					},
				})
			}
		}
	}
</script>

<style scoped>
	.container {
		font-size: 25rpx;
		padding: 0 20rpx;
	}
	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.divider {
		width: 100%;
		height: 1rpx;
		background-color: #eee;
	}
	.text-color {
		color: #999;
		font-size: 23rpx;
	}
	.order-money {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx 20rpx;
	}
	.order-money-top {
		background-color: #eee;
		border-radius: 20rpx;
		padding: 20rpx 10rpx;
		line-height: 2rem;
	}
	.deposit {
		margin-top: 20rpx;
		padding: 20rpx 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}
	.deposit-bottom {
		padding: 20rpx 10rpx;
		background-color: #eee;
		border-radius: 20rpx;
		line-height: 2rem;
	}
	.send {
		border-radius: 20rpx;
		background-color: #fff;
		margin-top: 20rpx;
	}
	.send-item {
		padding: 20rpx 10rpx;
	}
	.remarks {
		display: flex;
		justify-content: space-between;
		text-align: center;
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
	}
	.remarks-detail {
		word-wrap: break-word;
	}
	.order-info {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx 10rpx;
		margin-top: 20rpx;
	}
</style>
